<template>
	<view class="container">
		<div style="z-index: 999;position: relative;">
			<u-loading-page :loading="loading" loading-mode="spinner"></u-loading-page>
		</div>
		<view style="margin-top: 10vh" v-if='swiperList.length>0' class="banner-box">
			<!-- 	<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
				<swiper-item v-for="url in swiperList" :key="url">
					<img style="width: 100%; height: 100%;" :src="url" alt="" srcset="" />
				</swiper-item>
			</swiper> -->
			<lSwiper :duration='500' @input='change' :autoplay='false' type="card" :banner="swiperList" v-model="index">
			</lSwiper>

		</view>
		<view style="display: flex;width: 80%;justify-content: center;width: 100%;">
			<view @click="fxMethod" class="animateBtn"
				style="padding:30rpx 20rpx ; width:80vw;border-radius:40rpx ;background-color: #1f62ff;color: #fff;margin-right: 3px;text-align: center;font-size: 16px;">
				保存分享</view>
			<!-- 	<view
				style="padding: 20rpx 50rpx;border-radius:0 40rpx  40rpx  0;background-color: #ff8522;color: #fff;position: relative;">
				<button style="opacity: 0;position: absolute;left: 0;top: 0;width: 100%;height: 100%;" type="default"
					open-type="share" :data-type='share.title' :data-id='share.imageUrl'
					@ShareAppMessage="onShareAppMessage()" class="share-btn"></button> 转发海报
			</view> -->

		</view>

		<u-popup :show="show" @close="close" round='20' :safeAreaInsetBottom='false' mode='center' :closeable='true'>
			<!-- bgColor='rgba(0,0,0,0)' -->
			<div style="width: 70vw;">
				<view style="width:100%;">
					<image style="width:100%;" mode='widthFix' :src="createImage" class="swiper-image-popup"
						:class="[value != index ? 'swiper-scsle' : '']" show-menu-by-longpress='1' lazy-load></image>


				</view>
				<div style="padding: 10px 20px;font-size: 12px;color: #666;box-sizing: border-box;width: 100%;">
					{{content}}
				</div>
				<div style="text-align: center;padding: 10px;color: red;font-size: 12px;">文案已复制，长按转发或保存图片</div>
			</div>
		</u-popup>

	</view>
</template>
<script>
	import lSwiper from './l-swiper/index.vue'
	import {
		templateList,
		createImages,
		contentTemplateList
	} from '@/api/axios/operation.js'
	export default {
		components: {
			lSwiper
		},
		data() {
			return {
				staticURL: this.staticURL,
				swiperList: [],
				createImage: '',
				show: false,
				index: 0,
				loading: false,
				share: {
					title: '活动分享',
					path: '/pages-operation/my-poster/index?id=' + 123,
					imageUrl: this.staticURL + '/static/operation/hb-bg.jpg?' + Date.parse(
						new Date()), //图片链接，必须是网络连接，后面拼接时间戳防止本地缓存,
					desc: '',
					content: '大麦小程序'
				},
				activityImageId: "",
				content: ''
			}
		},
		onShareTimeline(res) {
			console.log(res);
			return {
				title: this.share.title,
				query: ''
			}
		},
		onShareAppMessage(res) {
			console.log(res);
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				desc: this.share.desc,
				content: this.share.content,
			}
		},
		methods: {
			fxMethod() {
				console.log(this.index);
				// content
				// let routerObj = JSON.parse(uni.getStorageInfoSync('routerObj'))
				let obj = uni.getStorageSync('routerObj')
				let customerId = uni.getStorageSync('customerId')
				let id = this.swiperList[this.index].id
				console.log(obj.a, customerId, id);
				this.loading = true
				createImages({
					templateId: id,
					userId: obj.a,
					customerId: customerId,
					imageType: 'CUSTOMER'
				}).then(res => {
					this.createImage = res.imageUrl
					this.loading = false
					console.log(this.swiperList, this.index);
					this.getDetail(this.swiperList[this.index])
					this.show = true
					this.saveActivityClue({
						activityImageId: this.activityImageId,
						shareStatus: 1,
					})
				})

			},
			close() {
				this.show = false
			},
			change(data) {
				console.log(data);
			},
			getDetail(info) {
				uni.setClipboardData({
					data: this.content, // e是你要保存的内容
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						}, 2000)
					}
				})
			}
		},
		onLoad(data) {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			this.activityImageId = data.activityImageId
			templateList({}).then(res => {

				this.swiperList = res.map(item => {
					return {
						imageUrl: item.imageUrl,
						id: item.id,
						content: item.content,
					}
				})
				// this.swiperList = [this.swiperList[0]]
			})
			contentTemplateList().then(res => {
				console.log(res);
				let index = Math.floor(Math.random() * res.length)
				console.log(index);
				this.content = res[index].content
			})
		}
	}
</script>
<style scoped lang="scss">
	@import './index.scss'
</style>